<template>
  <div class="listeners-properties">
    <!-- 监听器表格 -->
    <el-table :data="listeners" size="small" class="listener-table">
      <el-table-column prop="event" :label="t('bpmn.eventType')" />
      <el-table-column prop="type" :label="t('bpmn.listenerType')" />
      <el-table-column :label="t('bpmn.operations')" width="150">
        <template #default="{ $index }">
          <el-button size="small" @click="editListener($index)">
            {{ t('bpmn.edit') }}
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="removeListener($index)"
          >
            {{ t('bpmn.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加监听器按钮 -->
    <el-button
        type="primary"
        class="add-listener-btn"
        @click="addListener"
    >
      {{ t('bpmn.addListener') }}
    </el-button>

    <!-- 监听器编辑对话框 -->
    <el-dialog
        v-model="dialogVisible"
        :title="t('bpmn.listenerConfig')"
        width="500px"
    >
      <el-form label-position="top">
        <el-form-item :label="t('bpmn.eventType')">
          <el-select v-model="currentListener.event">
            <el-option
                v-for="event in eventTypes"
                :key="event.value"
                :label="event.label"
                :value="event.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="t('bpmn.listenerType')">
          <el-select v-model="currentListener.type">
            <el-option
                v-for="type in listenerTypes"
                :key="type.value"
                :label="type.label"
                :value="type.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
            v-if="currentListener.type === 'expression'"
            :label="t('bpmn.expression')"
        >
          <el-input v-model="currentListener.expression" />
        </el-form-item>

        <el-form-item
            v-if="currentListener.type === 'delegateExpression'"
            :label="t('bpmn.delegateExpression')"
        >
          <el-input v-model="currentListener.delegateExpression" />
        </el-form-item>

        <el-form-item
            v-if="currentListener.type === 'class'"
            :label="t('bpmn.className')"
        >
          <el-input v-model="currentListener.class" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">
          {{ t('bpmn.cancel') }}
        </el-button>
        <el-button type="primary" @click="saveListener">
          {{ t('bpmn.confirm') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const props = defineProps({
  element: Object
});

const emit = defineEmits(['update']);

// 事件类型选项
const eventTypes = computed(() => [
  { label: t('bpmn.eventStart'), value: 'start' },
  { label: t('bpmn.eventEnd'), value: 'end' },
  { label: t('bpmn.eventCreate'), value: 'create' }
]);

// 监听器类型选项
const listenerTypes = computed(() => [
  { label: t('bpmn.listenerClass'), value: 'class' },
  { label: t('bpmn.listenerExpression'), value: 'expression' },
  { label: t('bpmn.listenerDelegate'), value: 'delegateExpression' }
]);

// 监听器列表
const listeners = ref([]);
const dialogVisible = ref(false);
const currentListener = ref(null);
const editingIndex = ref(-1);

// 监听元素变化
watch(() => props.element, (newElement) => {
  if (newElement && newElement.businessObject) {
    const extensionElements = newElement.businessObject.extensionElements;
    listeners.value = extensionElements
        ? extensionElements.values.filter(
            e => e.$type === 'flowable:TaskListener' ||
                e.$type === 'flowable:ExecutionListener'
        ).map(listener => ({
          id: listener.id,
          event: listener.event,
          type: listener.expression ? 'expression' :
              listener.delegateExpression ? 'delegateExpression' : 'class',
          expression: listener.expression,
          delegateExpression: listener.delegateExpression,
          class: listener.class
        }))
        : [];
  }
}, { immediate: true });

// 添加监听器
function addListener() {
  currentListener.value = {
    event: 'start',
    type: 'expression',
    expression: '',
    delegateExpression: '',
    class: ''
  };
  editingIndex.value = -1;
  dialogVisible.value = true;
}

// 编辑监听器
function editListener(index) {
  currentListener.value = { ...listeners.value[index] };
  editingIndex.value = index;
  dialogVisible.value = true;
}

// 删除监听器
function removeListener(index) {
  listeners.value.splice(index, 1);
  saveListeners();
}

// 保存监听器
function saveListener() {
  if (editingIndex.value >= 0) {
    listeners.value[editingIndex.value] = { ...currentListener.value };
  } else {
    listeners.value.push({ ...currentListener.value });
  }
  dialogVisible.value = false;
  saveListeners();
}

// 保存到元素
function saveListeners() {
  const listenerValues = listeners.value.map(listener => {
    const base = {
      $type: 'flowable:TaskListener',
      event: listener.event
    };

    if (listener.type === 'expression') {
      return { ...base, expression: listener.expression };
    } else if (listener.type === 'delegateExpression') {
      return { ...base, delegateExpression: listener.delegateExpression };
    } else {
      return { ...base, class: listener.class };
    }
  });

  emit('update', {
    businessObject: {
      extensionElements: {
        values: listenerValues
      }
    }
  });
}
</script>

<style scoped>
.listeners-properties {
  padding: 12px;
}
.listener-table {
  margin-bottom: 16px;
}
.add-listener-btn {
  width: 100%;
}
</style>